<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传 - xx-ai 文件浏览器</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/file/}">
                    <i class="bi bi-folder2-open"></i>
                    xx-ai 文件浏览器
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/file/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/file/browse(path=${targetPath})}">
                        <i class="bi bi-arrow-left"></i>
                        返回目录
                    </a>
                </div>
            </div>
        </nav>

        <!-- 成功/错误消息 -->
        <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle"></i>
            <span th:text="${success}"></span>
            <span th:if="${uploadedFile}"> 文件名：<strong th:text="${uploadedFile}"></strong></span>
            <button type="button" class="btn-close" data-dismiss="alert"></button>
        </div>

        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-dismiss="alert"></button>
        </div>

        <!-- 文件上传表单 -->
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-cloud-upload"></i>
                            多文件上传
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="/file/upload" method="post" enctype="multipart/form-data" id="uploadForm">
                            <!-- 目标路径 -->
                            <div class="mb-3">
                                <label for="targetPath" class="form-label">
                                    <i class="bi bi-folder"></i>
                                    目标目录
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-folder-open"></i>
                                    </span>
                                    <input type="text" 
                                           class="form-control" 
                                           id="targetPath" 
                                           name="targetPath" 
                                           th:value="${targetPath}"
                                           required>
                                    <button type="button" class="btn btn-outline-secondary" onclick="selectDirectory()">
                                        <i class="bi bi-search"></i>
                                        浏览
                                    </button>
                                </div>
                                <div class="form-text">选择文件上传的目标目录</div>
                            </div>

                            <!-- 文件类型过滤 -->
                            <div class="mb-3">
                                <label for="fileTypeFilter" class="form-label">
                                    <i class="bi bi-funnel"></i>
                                    文件类型过滤（可选）
                                </label>
                                <select class="form-select" id="fileTypeFilter" onchange="handleFileTypeFilter()">
                                    <option value="">全部文件类型</option>
                                    <option value="image/*">图片文件 (jpg, png, gif, svg...)</option>
                                    <option value="video/*">视频文件 (mp4, avi, mov...)</option>
                                    <option value="audio/*">音频文件 (mp3, wav, flac...)</option>
                                    <option value=".pdf">文档文件 (pdf, doc, docx, xls...)</option>
                                    <option value=".zip,.rar,.7z,.tar,.gz">压缩文件 (zip, rar, 7z...)</option>
                                    <option value=".txt,.md,.log">文本文件 (txt, md, log...)</option>
                                    <option value=".js,.html,.css,.java,.py,.cpp">代码文件 (js, html, java...)</option>
                                </select>
                                <div class="form-text">选择限制上传的文件类型，空白表示不限制</div>
                            </div>
                            
                            <!-- 文件选择 -->
                            <div class="mb-3">
                                <label for="file" class="form-label">
                                    <i class="bi bi-files"></i>
                                    选择文件
                                </label>
                                
                                <!-- 拖拽上传区域 -->
                                <div id="dropZone" class="border border-2 border-dashed rounded p-4 text-center mb-3 position-relative"
                                     style="min-height: 120px; cursor: pointer; transition: all 0.3s ease;">
                                    <div id="dropZoneContent">
                                        <i class="bi bi-cloud-upload fs-1 text-muted d-block mb-2"></i>
                                        <p class="text-muted mb-2">
                                            <strong>拖拽文件到这里</strong> 或 
                                            <span class="text-primary" style="text-decoration: underline;">点击选择文件</span>
                                        </p>
                                        <small class="text-muted">支持多文件选择，单个文件最大500MB</small>
                                    </div>
                                    
                                    <!-- 拖拽提示覆盖层 -->
                                    <div id="dragOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-none
                                               bg-primary bg-opacity-10 border border-primary border-2 rounded
                                               align-items-center justify-content-center">
                                        <div class="text-center">
                                            <i class="bi bi-download fs-1 text-primary d-block mb-2"></i>
                                            <p class="text-primary fw-bold mb-0">释放文件开始上传</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <input type="file" 
                                       class="d-none" 
                                       id="file" 
                                       name="file" 
                                       multiple
                                       required
                                       onchange="handleFileSelect(this)"
                                       accept="*/*">
                                       
                                <div class="form-text">
                                    <i class="bi bi-info-circle"></i>
                                    支持拖拽和多文件选择。可使用 Ctrl+A 选择全部文件，或 Ctrl+点击 选择多个文件。
                                </div>
                            </div>

                            <!-- 文件信息展示 -->
                            <div id="fileInfo" class="mb-3 d-none">
                                <div class="card border-primary">
                                    <div class="card-header bg-primary bg-opacity-10">
                                        <h6 class="card-title mb-0">
                                            <i class="bi bi-list-check"></i>
                                            选中的文件：
                                            <button type="button" class="btn btn-sm btn-outline-primary float-end" 
                                                    onclick="clearAllFiles()" title="清空所有文件">
                                                <i class="bi bi-trash"></i> 清空
                                            </button>
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div id="fileList"></div>
                                    </div>
                                </div>
                            </div>

                            <!-- 上传选项 -->
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="overwrite" 
                                           name="overwrite"
                                           value="true">
                                    <label class="form-check-label" for="overwrite">
                                        <i class="bi bi-arrow-repeat"></i>
                                        覆盖同名文件
                                    </label>
                                </div>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="showDetail" 
                                           name="showDetail"
                                           value="true"
                                           checked>
                                    <label class="form-check-label" for="showDetail">
                                        <i class="bi bi-list-ul"></i>
                                        显示详细上传结果页面
                                    </label>
                                </div>
                                <div class="form-text">上传完成后显示每个文件的详细结果，包括成功和失败信息</div>
                            </div>

                            <!-- 文件描述 -->
                            <div class="mb-3">
                                <label for="description" class="form-label">
                                    <i class="bi bi-chat-text"></i>
                                    文件描述（可选）
                                </label>
                                <textarea class="form-control" 
                                          id="description" 
                                          name="description" 
                                          rows="3"
                                          placeholder="请输入文件描述信息..."></textarea>
                            </div>

                            <!-- 上传者信息 -->
                            <div class="mb-3">
                                <label for="uploader" class="form-label">
                                    <i class="bi bi-person"></i>
                                    上传者（可选）
                                </label>
                                <input type="text" 
                                       class="form-control" 
                                       id="uploader" 
                                       name="uploader"
                                       placeholder="请输入上传者姓名">
                            </div>

                            <!-- 操作按钮 -->
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <a th:href="@{/file/browse(path=${targetPath})}" 
                                   class="btn btn-secondary me-md-2">
                                    <i class="bi bi-arrow-left"></i>
                                    取消
                                </a>
                                <button type="submit" class="btn btn-primary" id="uploadBtn">
                                    <i class="bi bi-cloud-upload"></i>
                                    开始上传
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 上传进度 -->
                <div id="uploadProgress" class="card mt-3 d-none">
                    <div class="card-body">
                        <h6 class="card-title">
                            <i class="bi bi-cloud-upload"></i>
                            上传进度
                        </h6>
                        <div class="progress mb-2">
                            <div id="progressBar" 
                                 class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" 
                                 style="width: 0%">0%</div>
                        </div>
                        <div id="uploadStatus" class="text-muted">准备上传...</div>
                    </div>
                </div>

                <!-- 使用说明 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-info-circle"></i>
                            使用说明
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>上传功能</h6>
                                <ul class="list-unstyled">
                                    <li><i class="bi bi-check-circle text-success"></i> 支持多文件同时上传</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 支持拖拽上传功能</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 单个文件最大500MB</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 支持所有文件类型</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 文件类型过滤功能</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 自动创建目标目录</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 实时文件大小检查</li>
                                    <li><i class="bi bi-check-circle text-success"></i> 可移除不需要的文件</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6>安全保障</h6>
                                <ul class="list-unstyled">
                                    <li><i class="bi bi-shield-check text-warning"></i> 文件名自动清理特殊字符</li>
                                    <li><i class="bi bi-shield-check text-warning"></i> 禁止上传到系统目录</li>
                                    <li><i class="bi bi-shield-check text-warning"></i> 自动检测文件类型</li>
                                    <li><i class="bi bi-shield-check text-warning"></i> 路径安全验证</li>
                                    <li><i class="bi bi-shield-check text-warning"></i> 部分失败时详细报告</li>
                                    <li><i class="bi bi-shield-check text-warning"></i> 上传前文件验证</li>
                                    <li><i class="bi bi-shield-check text-warning"></i> 文件类型限制验证</li>
                                    <li><i class="bi bi-shield-check text-warning"></i> 实时错误反馈</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="mt-3 p-3 bg-info bg-opacity-10 rounded">
                            <h6 class="text-info">
                                <i class="bi bi-lightbulb"></i>
                                使用技巧
                            </h6>
                            <ul class="mb-0">
                                <li><strong>拖拽上传：</strong>直接将文件拖拽到上传区域，支持批量拖拽</li>
                                <li><strong>多选文件：</strong>按住 Ctrl 键点击多个文件，或按 Ctrl+A 全选</li>
                                <li><strong>文件过滤：</strong>选择文件类型过滤器，限制只上传特定类型的文件</li>
                                <li><strong>文件预览：</strong>选择文件后可以预览文件列表和总大小</li>
                                <li><strong>移除文件：</strong>点击文件右侧的 × 按钮可以移除不需要的文件</li>
                                <li><strong>清空文件：</strong>点击“清空”按钮可以一键清空所有选中的文件</li>
                                <li><strong>批量操作：</strong>设置一次上传选项，应用到所有文件</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/app.js}"></script>
    <script>
        // 文件类型过滤处理
        function handleFileTypeFilter() {
            const filterSelect = $('#fileTypeFilter');
            const fileInput = $('#file');
            const selectedValue = filterSelect.val();
            
            if (selectedValue) {
                // 特殊处理PDF等文档类型
                if (selectedValue === '.pdf') {
                    fileInput.attr('accept', '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx');
                } else {
                    fileInput.attr('accept', selectedValue);
                }
            } else {
                fileInput.attr('accept', '*/*');
            }
            
            // 如果已经选择了文件，重新验证
            if (fileInput[0].files.length > 0) {
                handleFileSelect(fileInput[0]);
            }
        }
        
        // 验证文件类型是否符合过滤条件
        function isFileTypeAllowed(file) {
            const filterSelect = $('#fileTypeFilter');
            const selectedValue = filterSelect.val();
            
            if (!selectedValue) {
                return true; // 没有限制
            }
            
            const fileName = file.name.toLowerCase();
            const fileType = file.type.toLowerCase();
            
            // 处理通配符类型
            if (selectedValue.includes('/*')) {
                const typePrefix = selectedValue.replace('/*', '');
                return fileType.startsWith(typePrefix);
            }
            
            // 处理扩展名列表
            if (selectedValue.includes(',')) {
                const extensions = selectedValue.split(',').map(ext => ext.trim().toLowerCase());
                return extensions.some(ext => fileName.endsWith(ext.replace('.', '')));
            }
            
            // 单个扩展名
            if (selectedValue.startsWith('.')) {
                return fileName.endsWith(selectedValue.substring(1));
            }
            
            return fileType === selectedValue;
        }
        
        // 拖拽上传功能
        function initDragAndDrop() {
            const dropZone = $('#dropZone');
            const fileInput = $('#file');
            const dragOverlay = $('#dragOverlay');
            
            // 点击拖拽区域打开文件选择
            dropZone.on('click', function(e) {
                if ($(e.target).closest('#fileInfo').length > 0) {
                    // 如果点击的是文件信息区域，不触发文件选择
                    return;
                }
                fileInput.click();
            });
            
            // 拖拽进入
            dropZone.on('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropZone.addClass('border-primary bg-light');
                dragOverlay.removeClass('d-none').addClass('d-flex');
            });
            
            // 拖拽离开
            dropZone.on('dragleave', function(e) {
                e.preventDefault();
                e.stopPropagation();
                // 只有当鼠标真正离开dropZone时才隐藏覆盖层
                if (!dropZone[0].contains(e.relatedTarget)) {
                    dropZone.removeClass('border-primary bg-light');
                    dragOverlay.addClass('d-none').removeClass('d-flex');
                }
            });
            
            // 文件释放
            dropZone.on('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                dropZone.removeClass('border-primary bg-light');
                dragOverlay.addClass('d-none').removeClass('d-flex');
                
                const files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    // 将拖拽的文件赋值给文件输入框
                    const dt = new DataTransfer();
                    for (let i = 0; i < files.length; i++) {
                        dt.items.add(files[i]);
                    }
                    fileInput[0].files = dt.files;
                    
                    // 触发文件选择处理
                    handleFileSelect(fileInput[0]);
                }
            });
            
            // 防止页面默认的拖拽行为
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                $(document).on(eventName, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
            });
        }
        
        // 文件选择处理
        function handleFileSelect(input) {
            const files = input.files;
            const fileInfo = $('#fileInfo');
            const fileList = $('#fileList');
            
            if (files.length > 0) {
                fileInfo.removeClass('d-none');
                fileList.empty();
                
                let totalSize = 0;
                let hasLargeFile = false;
                let hasInvalidType = false;
                const maxFileSize = 500 * 1024 * 1024; // 500MB
                
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    totalSize += file.size;
                    
                    // 检查文件大小
                    const isLarge = file.size > maxFileSize;
                    if (isLarge) hasLargeFile = true;
                    
                    // 检查文件类型
                    const isValidType = isFileTypeAllowed(file);
                    if (!isValidType) hasInvalidType = true;
                    
                    const fileItem = $('<div>');
                    let borderClass = 'border-primary';
                    let textClass = '';
                    let badges = '';
                    
                    if (isLarge) {
                        borderClass = 'border-danger';
                        textClass = 'text-danger';
                        badges += '<span class="badge bg-danger ms-2">超过限制</span>';
                    }
                    
                    if (!isValidType) {
                        borderClass = 'border-warning';
                        textClass = textClass || 'text-warning';
                        badges += '<span class="badge bg-warning ms-2">类型不匹配</span>';
                    }
                    
                    fileItem.addClass(`border-start border-3 ${borderClass} ps-3 mb-2`).html(`
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="bi ${getFileIcon(file.name)} ${textClass || 'text-primary'}"></i>
                                <strong class="${textClass}">${file.name}</strong>
                                <small class="text-muted">(${formatFileSize(file.size)})</small>
                                ${badges}
                            </div>
                            <div>
                                <span class="badge bg-secondary">${file.type || '未知类型'}</span>
                                <button type="button" class="btn btn-sm btn-outline-danger ms-2" 
                                        onclick="removeFile(${i})" title="移除此文件">
                                    <i class="bi bi-x"></i>
                                </button>
                            </div>
                        </div>
                    `);
                    fileList.append(fileItem);
                }
                
                // 添加总计信息
                const totalInfo = $('<div>').addClass('mt-3 pt-3 border-top');
                
                let statusMessage = '';
                let statusClass = 'text-success';
                
                if (hasLargeFile || hasInvalidType) {
                    if (hasLargeFile && hasInvalidType) {
                        statusMessage = '<i class="bi bi-exclamation-triangle"></i> 有文件超过大小限制且类型不匹配';
                        statusClass = 'text-danger';
                    } else if (hasLargeFile) {
                        statusMessage = '<i class="bi bi-exclamation-triangle"></i> 有文件超过大小限制';
                        statusClass = 'text-danger';
                    } else {
                        statusMessage = '<i class="bi bi-exclamation-triangle"></i> 有文件类型不匹配';
                        statusClass = 'text-warning';
                    }
                } else {
                    statusMessage = '<i class="bi bi-check-circle"></i> 所有文件符合要求';
                }
                
                totalInfo.html(`
                    <div class="d-flex justify-content-between align-items-center">
                        <strong>总计：${files.length} 个文件，${formatFileSize(totalSize)}</strong>
                        <span class="${statusClass}">${statusMessage}</span>
                    </div>
                `);
                fileList.append(totalInfo);
                
                // 更新上传按钮状态
                const uploadBtn = $('#uploadBtn');
                if (hasLargeFile) {
                    uploadBtn.prop('disabled', true);
                    uploadBtn.html('<i class="bi bi-exclamation-triangle"></i> 有文件超过限制');
                    uploadBtn.attr('class', 'btn btn-danger');
                } else if (hasInvalidType) {
                    uploadBtn.prop('disabled', true);
                    uploadBtn.html('<i class="bi bi-exclamation-triangle"></i> 有文件类型不匹配');
                    uploadBtn.attr('class', 'btn btn-warning');
                } else {
                    uploadBtn.prop('disabled', false);
                    uploadBtn.html('<i class="bi bi-cloud-upload"></i> 开始上传');
                    uploadBtn.attr('class', 'btn btn-primary');
                }
                
            } else {
                fileInfo.addClass('d-none');
                // 重置上传按钮
                const uploadBtn = $('#uploadBtn');
                uploadBtn.prop('disabled', false);
                uploadBtn.html('<i class="bi bi-cloud-upload"></i> 开始上传');
                uploadBtn.attr('class', 'btn btn-primary');
            }
        }
        
        // 清空所有文件
        function clearAllFiles() {
            const fileInput = $('#file');
            const fileInfo = $('#fileInfo');
            const uploadBtn = $('#uploadBtn');
            
            // 清空文件输入
            fileInput.val('');
            
            // 隐藏文件信息
            fileInfo.addClass('d-none');
            
            // 重置上传按钮
            uploadBtn.prop('disabled', false);
            uploadBtn.html('<i class="bi bi-cloud-upload"></i> 开始上传');
            uploadBtn.attr('class', 'btn btn-primary');
        }
        
        // 移除文件
        function removeFile(index) {
            const fileInput = $('#file');
            const dt = new DataTransfer();
            
            // 重新添加除指定索引外的所有文件
            for (let i = 0; i < fileInput[0].files.length; i++) {
                if (i !== index) {
                    dt.items.add(fileInput[0].files[i]);
                }
            }
            
            fileInput[0].files = dt.files;
            handleFileSelect(fileInput[0]);
        }
        
        // 获取文件图标
        function getFileIcon(fileName) {
            const extension = fileName.split('.').pop().toLowerCase();
            const iconMap = {
                // 图片文件
                'jpg': 'bi-image', 'jpeg': 'bi-image', 'png': 'bi-image', 'gif': 'bi-image', 'bmp': 'bi-image', 'svg': 'bi-image', 'webp': 'bi-image',
                // 文档文件
                'pdf': 'bi-file-pdf', 'doc': 'bi-file-word', 'docx': 'bi-file-word', 'xls': 'bi-file-excel', 'xlsx': 'bi-file-excel', 'ppt': 'bi-file-ppt', 'pptx': 'bi-file-ppt',
                // 文本文件
                'txt': 'bi-file-text', 'md': 'bi-file-text', 'log': 'bi-file-text',
                // 代码文件
                'js': 'bi-file-code', 'html': 'bi-file-code', 'css': 'bi-file-code', 'java': 'bi-file-code', 'py': 'bi-file-code', 'cpp': 'bi-file-code',
                // 压缩文件
                'zip': 'bi-file-zip', 'rar': 'bi-file-zip', '7z': 'bi-file-zip', 'tar': 'bi-file-zip', 'gz': 'bi-file-zip',
                // 视频文件
                'mp4': 'bi-camera-video', 'avi': 'bi-camera-video', 'mov': 'bi-camera-video', 'wmv': 'bi-camera-video',
                // 音频文件
                'mp3': 'bi-music-note', 'wav': 'bi-music-note', 'flac': 'bi-music-note'
            };
            return iconMap[extension] || 'bi-file-earmark';
        }
        
        // 选择目录（简单版本）
        function selectDirectory() {
            const currentPath = $('#targetPath').val();
            const newPath = prompt('请输入目录路径：', currentPath);
            if (newPath && newPath.trim()) {
                $('#targetPath').val(newPath.trim());
            }
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
        }
        
        // 表单提交处理
        $('#uploadForm').on('submit', function(e) {
            const files = $('#file')[0].files;
            if (files.length === 0) {
                e.preventDefault();
                alert('请选择要上传的文件');
                return;
            }
            
            // 检查文件大小和类型
            const maxSize = 500 * 1024 * 1024; // 500MB
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                
                // 检查文件大小
                if (file.size > maxSize) {
                    e.preventDefault();
                    alert(`文件 "${file.name}" 超过500MB限制`);
                    return;
                }
                
                // 检查文件类型
                if (!isFileTypeAllowed(file)) {
                    e.preventDefault();
                    const filterSelect = $('#fileTypeFilter');
                    const filterText = filterSelect.find('option:selected').text();
                    alert(`文件 "${file.name}" 不符合选择的文件类型限制：${filterText}`);
                    return;
                }
            }
            
            // 显示上传进度
            showUploadProgress();
        });
        
        // 显示上传进度
        function showUploadProgress() {
            const uploadBtn = $('#uploadBtn');
            const progressCard = $('#uploadProgress');
            const statusDiv = $('#uploadStatus');
            const fileCount = $('#file')[0].files.length;
            
            uploadBtn.prop('disabled', true);
            uploadBtn.html('<i class="bi bi-cloud-upload"></i> 上传中...');
            progressCard.removeClass('d-none');
            statusDiv.text(`正在上传 ${fileCount} 个文件...`);
            
            // 模拟进度（实际项目中应该使用真实的上传进度）
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress >= 95) {
                    progress = 95;
                    clearInterval(interval);
                    statusDiv.text('即将完成...');
                }
                
                const progressBar = $('#progressBar');
                progressBar.css('width', progress + '%');
                progressBar.text(Math.round(progress) + '%');
            }, 300);
        }
        
        // 页面加载完成后初始化
        $(document).ready(function() {
            // 初始化拖拽上传
            initDragAndDrop();
            
            // 自动隐藏成功/错误消息
            $('.alert').each(function() {
                // Bootstrap 4 语法
                setTimeout(function() {
                    if ($(this).parent().length > 0) {
                        $(this).alert('close');
                    }
                }, 5000);
            });
        });
    </script>
</body>
</html>